<script setup lang="ts">
import {reqHospitalLevelAndRegion} from "@/api/home";
import {onMounted, ref} from "vue";
import type {
    HospitalLevelAndRegionResponseData,
    HospitalLevelAndRegionArr,
} from "@/api/type_home.ts";
//定义一个数组存储医院等级数据
let levelArr = ref<HospitalLevelAndRegionArr>([]);
//控制医院等级高亮响应式数据
let activeFlag = ref<string>('');
//组件挂载完毕
onMounted(() => {
    getLevel();
});
//获取医院等级的数据
const getLevel = async () => {
    let result: HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion(
        "HosType"
    );
    //存储医院等级的数据
    if (result.code == 200) {
        levelArr.value = result.data;
    }
};

//点击等级的按钮回调
const changeLevel = (level: string) => {
    //高亮响应式数据存储leve数值
    activeFlag.value = level;
    //触发自定义事件:将医院等级参数回传给父组件
    $emit('getLevel', level);
}

let $emit = defineEmits(['getLevel']);
</script>

<script lang="ts">
export default {
    name: "Level",
};
</script>

<template>
    <div class="level">
        <h1>医院</h1>
        <div class="box">
            <div class="left">等级:</div>
            <ul class="hospital">
                <li :class="{active:activeFlag==''}" @click="changeLevel('')">全部</li>
                <li v-for="level in levelArr" :key="level.value"
                    :class="{active:activeFlag==level.value}"
                    @click="changeLevel(level.value)">
                    {{ level.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<style scoped lang="scss">
.level {
    color: #7f7f7f;

    h1 {
        font-weight: 900;
        margin: 10px 0;
    }

    .box {
        display: flex;

        .left {
            width: 50px;
            margin-right: 10px;
        }

        .hos-level {
            display: flex;

            li {
                margin-right: 10px;

                &.active {
                    color: #55a6fe;
                }
            }

            li:hover {
                color: #55a6fe;
                cursor: pointer;
            }
        }
    }
}
</style>